<!--
 * @Description: 教学实施计划表
 * @Autor: dyx
 * @Date: 2023-05-30 14:36:16
 * @LastEditTime: 2023-06-02 17:48:23
-->
<template>
  <div class="TISchedule">
    <div style="padding-right: 7px">
      <el-button type="primary" style="float: right" @click="exportWord"
        >导出Word</el-button
      >
    </div>
    <div id="mytable" ref="mytable" v-loading="loading" style="width: 700px">
      <div class="table_title">教学实施计划表</div>
      <ul class="gaugeOutfit">
        <li>
          <span class="mylabel">单位名称：（盖章）</span>
          <span @click="flag = true" v-if="!flag" class="spanWidth"> </span>
          <input
            v-else
            type="text"
            v-model="dataForm.className"
            @blur="flag = false"
          />
        </li>
        <!-- <li>
          <span class="mylabel">培训机构：</span>
          <span @click="flag = true" v-if="!flag" class="spanWidth">
            {{ dataForm.pxjg }}</span
          >
          <input
            v-else
            type="text"
            v-model="dataForm.pxjg"
            @blur="flag = false"
          />
        </li> -->
      </ul>
      <table>
        <tr>
          <td class="td1" rowspan="3" colspan="2">培训班<br />基本信息</td>
          <td>培训班名称</td>
          <td>
            <input
              type="text"
              v-model="dataForm.className"
              readonly="readonly"
              style="width: 100%"
            />
          </td>
          <td>班主任</td>
          <td>
            <input
              type="text"
              v-model="dataForm.bzr"
              readonly="readonly"
              style="width: 100%"
            />
          </td>
        </tr>
        <tr>
          <td>培训类型(初训、复训)</td>
          <td>
            <input
              type="text"
              v-model="dataForm.pxlx"
              readonly="readonly"
              style="width: 100%"
            />
          </td>
          <td>培训地点</td>
          <td colspan="2">线上</td>
        </tr>
        <tr>
          <td>培训人数</td>
          <td>
            <input
              type="text"
              readonly="readonly"
              v-model="dataForm.pxrs"
              style="width: 100%"
            />
          </td>
          <td>培训学时</td>
          <td colspan="2">
            <input type="text" style="width: 100%" v-model="dataForm.zxs" />
          </td>
        </tr>
        <tr>
          <td colspan="7" height="25px"></td>
        </tr>
      </table>

      <table class="table2">
        <tr>
          <td rowspan="2" width="50px">序号</td>
          <td rowspan="2" width="300px">时间</td>
          <td rowspan="2" width="300px">课程名称</td>
          <td style="text-align: center" rowspan="2" width="100px">课程学时</td>
          <!-- <td rowspan="2" width="200px">参考教材或资料</td> -->
          <td colspan="3" style="text-align: center">授课教师</td>
          <td rowspan="2" width="100px">教学方式</td>
          <td rowspan="2" width="100px">实施层级</td>
        </tr>
        <tr>
          <td width="160px">姓名</td>
          <td width="60px">学历</td>
          <td width="300px">职务/职称</td>
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <td height="30px">{{ item.xh }}</td>
          <td height="30px">{{ dataForm.pxsj }}</td>
          <td height="30px">
            <input
              type="text"
              readonly="readonly"
              v-model="item.kcmc"
              style="width: 100%"
            />
          </td>
          <td height="30px" style="text-align: center">
            <input
              type="text"
              v-model="item.xs"
              readonly="readonly"
              style="width: 100%; text-align: center"
            />
          </td>
          <!-- <td height="30px">
            <input type="text" v-model="item.ckjc" readonly="readonly" style="width:100%;" />
          </td> -->
          <td height="30px">
            <input
              type="text"
              v-model="item.xm"
              readonly="readonly"
              style="width: 100%"
            />
          </td>
          <td height="30px">
            <input
              type="text"
              v-model="item.xl"
              readonly="readonly"
              style="width: 100%"
            />
          </td>
          <td height="30px">
            <input
              type="text"
              v-model="item.zw"
              readonly="readonly"
              style="width: 100%"
            />
          </td>
          <td>在线</td>
          <td>{{ item.level }}</td>
        </tr>
        <tr>
          <td height="30px" colspan="9">理论考试：</td>
        </tr>
        <tr>
          <td height="30px" colspan="9">实操考核：</td>
        </tr>
        <td colspan="9" height="50px" class="td_bottom">
          负责人签字：
          <span class="label2" style="float: right">
            日期：
            <el-date-picker
              v-model="dataForm.rq"
              type="date"
              value-format="yyyy-MM-dd"
              size="mini"
              style="width: 70%"
              readonly="readonly"
            >
            </el-date-picker>
          </span>

          <!-- <div class="bottom">
              <div class="bomlabel">
                <span> 负责人签字：</span
                ><input type="text" style="width:70%" v-model="dataForm.qz" />
              </div>
            </div> -->
        </td>
      </table>
      <br /><br /><br />
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "TISchedule",
  data() {
    return {
      loading: true,
      dataForm: {
        className: "",
        pxjg: "",
        pxrs: "",
        pxlx: "",
        pxsj: "",
        pxdd: "",
        zxs: "",
        sxs: "",
        xxs: "",
        lxs: "",
        qz: "",
        rq: "",
        childrenVOList: [],
      },
      list: [],
      flag: false,
    };
  },
  methods: {
    init(id) {
      this.loading = true;
      request({
        url:
          "/api/class_archives/generateA1/" +
          id +
          `?organizeId=${this.$store.getters.organizeId}`,
        method: "get",
      })
        .then((res) => {
          this.dataForm = res.data;
          // 创建10位数组
          this.list = Array.apply(null, { length: 1 }).map(() => {
            return {
              xh: "",
              kcmc: "",
              xs: "",
              ckjc: "",
              xm: "",
              xl: "",
              zw: "",
            };
          });
          console.log(this.dataForm, this.list);

          // 获取数据数组长度
          let lgh = this.dataForm.childrenVOList.length;
          // 替换数组
          this.list.splice(0, lgh, ...this.dataForm.childrenVOList);
          this.loading = false;
          console.log(this.dataForm, this.list);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    exportWord() {
      this.dataForm.childrenVOList = this.list;
      for (let key in this.dataForm) {
        if (Array.isArray(this.dataForm[key])) {
          if (key == "childrenVOList") {
            this.dataForm[key].forEach((item) => {
              for (let key2 in item) {
                if (item[key2] == null) {
                  item[key2] = "";
                }
              }
            });
          } else {
            this.dataForm[key] = this.dataForm[key].join(",");
          }
        } else if (this.dataForm[key] == null) {
          this.dataForm[key] = "";
        }
      }
      this.dataForm.organizeId = this.$store.getters.organizeId;
      request({
        responseType: "blob",
        url: "/api/class_archives/generateA1Export",
        method: "post",
        data: this.dataForm,
      }).then((res) => {
        // console.log(res, 123);
        var debug = res;
        if (debug) {
          var a = document.createElement("a");
          a.download = "教学实施计划表.docx";
          a.style.display = "none";
          var blob = new Blob([debug], { type: "application/x-msdownload" });
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.TISchedule {
  width: 100%;
  height: 78vh;
  overflow-y: auto;
  input {
    border: none;
    font-size: 14px;
  }
  .gaugeOutfit {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    li {
      list-style: none;
      width: 50%;
      padding-left: 10px;
      display: flex;
      .mylabel {
        // width: 90px;
      }
      .spanWidth {
        flex: 1;
      }
    }
  }
}
#mytable {
  width: 60%;
  //   height: 100%;
  //   padding: 0 20px;
  margin: 0 auto;
  font-size: 14px;
  .table_title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .spanWidth {
    // width: 100px;
    // height: 20px;
    // display: inline-block;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #000;
    // margin-top: 5px;
    td {
      border: 1px solid #000;
      //   height: 30px;
      text-align: left;
      padding: 5px 10px;
    }
    .td1 {
      // width: 200px;
      text-align: center;
      // 文字超出换行
      //   word-break: break-all;
      //   word-wrap: break-word;
    }
    .colspan6 {
      .label {
        .value {
          width: 80px;
          display: inline-block;
        }
      }
    }
  }
  .table2 {
    transform: translateY(-1px);
    .td_bottom {
      position: relative;
      .bottom {
        position: absolute;
        right: 0;
        bottom: 20px;
        .bomlabel {
          width: 300px;
          display: flex;
          align-items: center;
          span {
            // display: block;
          }
          .label2 {
            width: 60px;
          }
          input {
            flex: 1;
          }
        }
      }
    }
  }
}
::v-deep .el-date-editor {
  border: none;
  padding: 0;
  .el-range-input {
    text-align: center;
    width: 100px;
    color: #000;
  }
  .el-range-separator {
    line-height: 30px;
  }
}
::v-deep .el-input__inner {
  padding: 0 !important;
  border: none !important;
  width: 100% !important;
}
::v-deep .el-icon-date {
  display: none;
}
</style>
